<template>
  <div class="login" @keyup.enter="clcikEnter">
    <div class="page-login">
      <div class="page-login--layer">
        <div class="page-login--head">
          <!-- <img v-if="config.logo" :src="config.logo" /> -->
          <div>
            <div class="page-login--head-title">{{ config.title }}</div>
            <div class="page-login--head-title-text"></div>
          </div>
        </div>
        <div class="page-login--content">
          <img class="page-login--content-img" src="./image/login_bg.png" />
          <div class="page-login--content-main">
            <div class="page-login--form">
              <el-card shadow="never">
                <div class="login-tab">
                  <span class="active">{{ config.title }}登录</span>
                </div>
                <el-form
                  ref="loginForm"
                  :rules="rules"
                  :model="formLogin"
                  size="default"
                >
                  <!-- 密码登录 -->
                  <el-form-item prop="userAccount">
                    <el-input
                      v-model="formLogin.userAccount"
                      type="text"
                      placeholder="请输入账号"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="userPasswd">
                    <el-input
                      v-model.trim="formLogin.userPasswd"
                      show-password
                      placeholder="请输入密码"
                    >
                    </el-input>
                  </el-form-item>
                  <el-button
                    :loading="isloading"
                    size="default"
                    type="primary"
                    class="button-login"
                    @click="clcikEnter"
                    >登录</el-button
                  >
                </el-form>
              </el-card>
            </div>
          </div>
        </div>
        <div class="page-login--footer"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import config from "@/config";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const router = useRouter();
const store = useStore();

const isloading = ref(false);
const loginForm = ref(null);
const formLogin = ref({
  userAccount: "",
  userPasswd: "",
});
const rules = ref({
  userAccount: [{ required: true, message: "请输入账号", trigger: "blur" }],
  userPasswd: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const clcikEnter = () => {
  loginForm.value.validate((valid) => {
    if (valid) {
      submit();
    }
  });
};
const submit = () => {
  // 重定向对象不存在则返回顶层路径
  store.dispatch("user/passWordLogin", formLogin.value);
};
watch(
  () => store.getters.isLoginLoading,
  (val) => {
    isloading.value = val;
    // 找路由中 默认路由（只拿第一个）
    const default_router = store.getters.menuAllList.find(
      (item) => item.isDefault == "1"
    );

    // 重定向对象不存在则返回顶层路径
    const { redirect } = router.currentRoute.value.query;
    router.replace(redirect || default_router?.menuUrl || "/");
  },
  { immediate: true }
);
</script>
<style lang="scss" scoped>
// @import './login.scss';
@use "./login.scss" as *;
</style>
